<?php

//引入数据库信息
require_once '../config.php';

session_start();

function login()
{
    global $message;
    //验证用户是否输入信息
    if (empty($_POST['email'])) {

        $message = '请输入您的邮箱';
        return;
    }
    if (empty($_POST['password'])) {
        $message = '请输入您的密码';
        return;
    }


    $email = $_POST['email'];
    $password = $_POST['password'];

    //验证用户信息是否正确

    //1.连接数据库
    $data = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
    if (!$data) {
        exit('<h1>连接数据库失败</h1>');
    }

    //2.查询数据库信息
    $query = mysqli_query($data, "select * from users where email = '{$email}' limit 1;");
    if (!$query) {
        $message = '用户名不存在';
        return;
    }

    //3.获取查询对象
    $user = mysqli_fetch_assoc($query);

    if (!$user) {
        $message = '用户名和密码不匹配';
        return;
    }

    //4.数据库密码通过md5加密, 判断用户输入的密码转换为md5字符串与数据库md5的密码是否一致
    if (md5($password) !== $user['password']) {
        $message = '用户名和密码不匹配';
        return;
    }


    //记录当前用户,设置cookie
    $_SESSION['current_login_user'] = $user;


    //登录成功,跳转主页面
    header('Location: /admin/index.php');

}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    login();
}


//退出,删除session
if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['action']) && $_GET['action'] === 'logout') {
    unset($_SESSION['current_login_user']);
}


?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Sign in &laquo; Admin</title>
    <link rel="stylesheet" href="/static/assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/assets/vendors/animate/animate.css">
    <link rel="stylesheet" href="/static/assets/css/admin.css">
</head>
<body>
<div class="login">

    <form class="login-wrap<?php echo isset($message) ? ' shake animated' : ''; ?>"
          action="<?php $_SERVER['PHP_SELF']; ?>" method="post" autocomplete="off" novalidate>
        <img class="avatar" src="/static/assets/img/default.png">
        <?php if (isset($message)): ?>
            <div class="alert alert-danger">
                <strong><?php echo $message ?></strong>
            </div>
        <?php endif; ?>
        <div class="form-group">
            <label for="email" class="sr-only">邮箱</label>
            <input id="email" name="email" type="email" class="form-control" placeholder="邮箱" autofocus
                   value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>">
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">密码</label>
            <input id="password" name="password" type="password" class="form-control" placeholder="密码">
        </div>
        <button class="btn btn-primary btn-block">登 录</button>
    </form>
</div>


<script src="../static/assets/vendors/jquery/jquery.js"></script>
<script>
    //需求:当用户输入完邮箱失去焦点时,显示对应的头像
    //思路:由于头像数据存放在数据库,js需要通过ajax请求告诉服务器我应该干的事情
    //步骤:

    $(function ($) {
        let email = $('#email');
        //1.获取邮箱正则
        let reg = /^[a-zA-Z0-9]+[@][a-zA-Z0-9]+\.[a-zA-Z0-9]+$/;
        let tab = true;

        email.on('change', function () {
            let  value = $(this).val();
            if (value.length===0){
                tab = true;
            }
            //2.失去焦点验证邮箱
            let flag = reg.test(value);
            if (!value || !flag) return; //用户信息格式满足验证条件
            //3.发送ajax请求
            if (tab) {
                tab = false;
                $.get('/admin/api/avatar.php', {email: value}, function (res) {
                    //4.接受服务端响应回头像的数据
                    if (!res) return;   //是否响应
                    //更新头像
                    $('.avatar').fadeOut(0, function () {
                        $(this).attr('src', res);
                        $(this).fadeIn(200);
                    });
                });
            }
        });
    });


</script>


</body>
</html>
